<template>
  <div class="cms-atlas" :class="`style_${type}`">
    <div class="atlas" v-for="(item, index) in data" :key="index">
      <img :src="item.url" class="img-container" alt="" v-if="type === 1 || type === 2" />
      <div class="img-container" :style="{ background: item.bgColor }" v-else></div>
      <p class="text-container">{{ item.categories }}</p>
      <div class="right-circle">
        <right-outlined style="color: #000000" v-if="type === 3" />
      </div>
    </div>
    <div class="more-atlas">
      <div v-if="type === 1 || type === 2" class="h-[42px] more-box">
        <img :src="type === 1 ? showIcons.novel1 : showIcons.novel2" class="w-6 h-[19px]" alt="" />
        <p v-if="type === 2" class="text-more-container">更多</p>
      </div>
      <div class="img-container" v-else style="background: linear-gradient(135deg, #dbdbdb 0%, #a0a0a0 100%)"></div>
      <p v-if="type === 1" class="text-container">更多</p>

      <p v-if="type === 3" class="text-container">更多</p>
      <div class="right-circle text-center">
        <right-outlined style="color: #000000" v-if="type === 3" />
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import cmsCategoryGridProps from './props'
import { RightOutlined } from '@ant-design/icons-vue'
import showIcons from '../../assets'

export default defineComponent({
  props: cmsCategoryGridProps,
  data() {
    return {
      data: [
        {
          url: this.typeView === 'novel' ? showIcons.article : showIcons.atlas,
          categories: '类型',
          bgColor: 'linear-gradient(135deg, #DCE0F0 0%, #B9C2E7 100%, #B9C2E7 100%)'
        },
        {
          url: this.typeView === 'novel' ? showIcons.article : showIcons.atlas,
          categories: '类型',
          bgColor: 'linear-gradient(135deg, #D8E9E6 0%, #AABFBA 100%)'
        },
        {
          url: this.typeView === 'novel' ? showIcons.article : showIcons.atlas,
          categories: '类型',
          bgColor: 'linear-gradient(135deg, #E5CCBB 0%, #C7A894 100%)'
        },
        {
          url: this.typeView === 'novel' ? showIcons.article : showIcons.atlas,
          categories: '类型',
          bgColor: 'linear-gradient(135deg, #B1CAE5 0%, #8AACCA 100%)'
        },
        {
          url: this.typeView === 'novel' ? showIcons.article : showIcons.atlas,
          categories: '类型',
          bgColor: 'linear-gradient(135deg, #F7DBD6 0%, #ECBEBC 100%)'
        },
        {
          url: this.typeView === 'novel' ? showIcons.article : showIcons.atlas,
          categories: '类型',
          bgColor: 'linear-gradient(135deg, #BDDFF1 0%, #91C2D3 100%)'
        },
        {
          url: this.typeView === 'novel' ? showIcons.article : showIcons.atlas,
          categories: '类型',
          bgColor: 'linear-gradient(135deg, #CED3E0 0%, #AFB6C4 100%)'
        }
      ],
      showIcons
    }
  },
  components: {
    RightOutlined
  }
})
</script>

<style scoped lang="less">
.cms-atlas {
  width: 375px;
  column-gap: 14px;
  background-color: #f6f6f6;
  @apply flex flex-wrap px-4 py-2  gap-y-4;

  &.style_1 {
    .atlas {
      width: 75px;
      text-align: center;
    }
    .more-atlas {
      width: 75px;
      text-align: center;
      .more-box {
        line-height: 42px;
      }
    }
    .img-container {
      width: 75px;
      height: 42px;
      border-radius: 6px;
      object-fit: cover;
    }
    .text-container {
      font-size: 14px;
      color: #484a4d;
      letter-spacing: -0.56px;
      font-weight: 400;
      margin-top: 4px;
    }
  }
  &.style_2 {
    .atlas {
      width: 75px;
      text-align: center;
      @apply relative;
      &::after {
        content: '';
        display: inline-block;
        @apply w-full h-full absolute top-0 left-0 right-0;
        background: rgba(0, 0, 0, 0.46);
        border-radius: 3px;
      }
    }
    .more-atlas {
      width: 75px;
      text-align: center;
      .more-box {
        @apply flex items-center justify-center;
        .text-more-container {
          @apply text-xs text-[#333] pl-2;
        }
      }
    }
    .img-container {
      width: 75px;
      height: 42px;
      border-radius: 3px;
      object-fit: cover;
    }
    .text-container {
      font-size: 13px;
      color: #ffffff;
      letter-spacing: -0.56px;
      font-weight: 400;
      margin-top: 4px;
      position: absolute;
      right: 4px;
      bottom: 2px;
      z-index: 10;
    }
  }
  &.style_3 {
    @apply gap-x-2 gap-y-3;

    .atlas {
      width: 79px;
      text-align: center;
      position: relative;
    }
    .more-atlas {
      width: 79px;
      text-align: center;
      position: relative;
    }
    .img-container {
      width: 79px;
      height: 48px;
      border-radius: 3px;
    }
    .text-container {
      font-size: 14px;
      color: #333333;
      letter-spacing: -0.56px;
      font-weight: 500;
      position: absolute;
      left: 12px;
      top: 16px;
    }
    .right-circle {
      width: 14px;
      height: 14px;
      font-size: 10px;
      border-radius: 50%;
      background: rgba(51, 51, 51, 0.08);
      line-height: 14px;
      position: absolute;
      top: 18px;
      right: 12px;
    }
  }
}
</style>
